<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>移动web点5像素border-radius</title>
	<style type="text/css">
		body{padding: 50px;-webkit-touch-callout:none;}
		[class*="btn"]{margin: 0 auto;}
		.btn-1 {
		    width: 200px;
		    height: 42px;
		    -webkit-border-radius: 5px;
		    border-radius: 5px;
		    text-align: center;
		    line-height: 42px;
		    background-color: #EDEDED;
		    border: 1px solid red;
		}
		.btn {
		    position: relative;
		    width: 200px;
		    height: 42px;
		    -webkit-border-radius: 5px;
		    border-radius: 5px;
		    text-align: center;
		    line-height: 42px;
		    background-color: #EDEDED;
		}
		.btn:before {
		    content: '';
		    position: absolute;
		    top: -50%;
		    bottom: -50%;
		    left: -50%;
		    right: -50%;
		    -webkit-transform: scale(0.5);
		    transform: scale(0.5);
		    border-style: solid;
		    border-width: 1px;
		    border-color: red;
		    -webkit-border-radius: 10px;
		    border-radius: 10px;
		}
	</style>
</head>

<body>

	<div class="btn-1">1px border</div>
	<br/><br/>
	<div class="btn">.5px border</div>
</body>
		

</html>